<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="OnClose" title="添加课时" width="50%">
      <el-steps :active="steps" simple>
        <el-step title="添加教学任务"/>
        <el-step title="设置内容"/>
        <el-step title="设置完成条件"/>
      </el-steps>
      <ul v-if="steps===0" class="ul-box">
        <li @click="liPicture">
          <i class="el-icon-picture-outline i-size"></i>
          <div>图文</div>
        </li>
        <li @click="liVideo">
          <i class="el-icon-video-camera-solid i-size"></i>
          <div>视频</div>
        </li>
<!--        <li @click="liFrequency">-->
<!--          <i class="el-icon-headset i-size"></i>-->
<!--          <div>音频</div>-->
<!--        </li>-->
<!--        <li @click="liLive">-->
<!--          <i class="el-icon-video-camera i-size"></i>-->
<!--          <div>直播</div>-->
<!--        </li>-->
<!--        <li @click="liDiscuss">-->
<!--          <i class="el-icon-s-comment i-size"></i>-->
<!--          <div>讨论</div>-->
<!--        </li>-->
<!--        <li @click="liFlash">-->
<!--          <i class="el-icon-film i-size"></i>-->
<!--          <div>Flash</div>-->
<!--        </li>-->
<!--        <li @click="liDocument">-->
<!--          <i class="el-icon-document i-size"></i>-->
<!--          <div>文档</div>-->
<!--        </li>-->
<!--        <li @click="liPPT">-->
<!--          <i class="el-icon-data-line i-size"></i>-->
<!--          <div>PPT</div>-->
<!--        </li>-->
<!--        <li @click="liExamine">-->
<!--          <i class="el-icon-finished i-size"></i>-->
<!--          <div>考试</div>-->
<!--        </li>-->
<!--        <li @click="liWork">-->
<!--          <i class="el-icon-document-copy i-size"></i>-->
<!--          <div>作业</div>-->
<!--        </li>-->
<!--        <li @click="liExercise">-->
<!--          <i class="el-icon-edit-outline i-size"></i>-->
<!--          <div>练习</div>-->
<!--        </li>-->
<!--        <li @click="liDownload">-->
<!--          <i class="el-icon-download i-size"></i>-->
<!--          <div>下载</div>-->
<!--        </li>-->
      </ul>
      <div>
        <Picture
          v-if="stamp==='picture'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
          :home="this"
        />
        <Video
          v-if="stamp==='video'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
          :home="this"
        />
        <frequency
          v-if="stamp==='frequency'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Livebroadcast
          v-if="stamp==='live'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Discuss
          v-if="stamp==='discuss'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Flash
          v-if="stamp==='flash'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Document
          v-if="stamp==='document'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <PPT
          v-if="stamp==='PPT'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Examine
          v-if="stamp==='examine'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Work
          v-if="stamp==='work'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Exercise
          v-if="stamp==='exercise'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
        <Download
          v-if="stamp==='download'"
          @nowStep0="nowStep0"
          @nowStep1="nowStep1"
          @nowStep2="nowStep2"
          @saveInfo="saveInfo"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Vue from 'vue'
  import uploader from 'vue-simple-uploader'
  import Picture from './steplist/picture'
  import Video from './steplist/video'
  import Frequency from './steplist/frequency'
  import Livebroadcast from './steplist/livebroadcast'
  import Discuss from './steplist/discuss'
  import Flash from './steplist/flash'
  import Document from './steplist/document'
  import PPT from './steplist/PPT'
  import Examine from './steplist/examine'
  import Work from './steplist/work'
  import Exercise from './steplist/exercise'
  import Download from './steplist/download'

  Vue.use(uploader);

  export default {
    components: {
      Picture,
      Video,
      Frequency,
      Livebroadcast,
      Discuss,
      Flash,
      Document,
      PPT,
      Examine,
      Work,
      Exercise,
      Download
    },
    props: {
      visiabledialog: {
        type: Boolean,
        default: false
      },
      'home': Object
    },
    data() {
      return {
        steps: 0,
        stamp: '',
        chapterId: '',
        acceptEduxcloudCourseId: '',
        EduxcloudCourseLesson: {
          title: '',
          courseId: '',
          mediaName: '',
          videoId: '',
          chapterId: '',
          content: '',
          videoMinute: '',
          videoSecond: '',
          finishType: 'styleTime',
          watchTime: '1',
          mediaSource: 'upload'
        },
      }
    },
    computed: {
      dialog() {
        return this.visiabledialog
      }
    },
    watch: {
      steps() {
      }
    },
    created() {
    },
    methods: {
      OnClose() {
        this.$emit('changeVisiable', false);
        this.stamp = '';
        this.steps = 0
      },
      nowStep0() {
        this.steps = 0;
        this.stamp = ''
      },
      nowStep1() {
        this.steps = 1
      },
      nowStep2() {
        this.steps = 2
      },
      saveInfo() {
        console.log("saveInfo classhourmanage");
        this.$parent.getData();
        this.OnClose()
      },
      // 图文
      liPicture() {
        this.acceptEduxcloudCourseId = this.home.acceptEduxcloudCourseId;
        this.chapterId = this.home.chapterId;
        this.EduxcloudCourseLesson = this.home.EduxcloudCourseLesson;
        this.stamp = 'picture';
        this.steps += 1
      },
      // 视频
      liVideo() {
        this.acceptEduxcloudCourseId = this.home.acceptEduxcloudCourseId;
        this.chapterId = this.home.chapterId;
        this.EduxcloudCourseLesson = this.home.EduxcloudCourseLesson;
        this.stamp = 'video';
        this.steps += 1
      },
      liFrequency() {
        this.stamp = 'frequency';
        this.steps += 1
      },
      // 直播
      liLive() {
        this.stamp = 'live';
        this.steps += 1
      },
      // 讨论
      liDiscuss() {
        this.stamp = 'discuss';
        this.steps += 1
      },
      // Flash
      liFlash() {
        this.stamp = 'flash';
        this.steps += 1
      },
      // 文档
      liDocument() {
        this.stamp = 'document';
        this.steps += 1
      },
      // PPT
      liPPT() {
        this.stamp = 'PPT';
        this.steps += 1
      },
      // 考试
      liExamine() {
        this.stamp = 'examine';
        this.steps += 1
      },
      // 作业
      liWork() {
        this.stamp = 'work';
        this.steps += 1
      },
      // 练习
      liExercise() {
        this.stamp = 'exercise';
        this.steps += 1
      },
      // 下载
      liDownload() {
        this.stamp = 'download';
        this.steps += 1
      }
    }
  }
</script>
<style lang="scss" scoped>
  .ul-box {
    list-style: none;
    overflow: hidden;
    margin: 20px 0 0;
    padding: 0 0 0 20px;

    li {
      float: left;
      width: 22%;
      text-align: center;
      height: 110px;
      background-color: #f4f6f8;
      display: block;
      color: #919191;
      margin: 8px;
      border-radius: 5px;
      box-sizing: border-box;
      border: 2px solid #f4f6f8;
      cursor: pointer;

      .i-size {
        font-size: 35px;
        padding-top: 20px;
        padding-bottom: 10px;
      }
    }

    li:hover {
      border: 2px solid #409eff;
    }
  }

  /deep/ .el-dialog__body {
    max-height: 600px;
    overflow: auto;
  }
</style>

